@import url("https://fonts.googleapis.com/css2?family=Titan+One&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #000;
}

span {
    font-size: 100px;
    /* 直接使用外部引入的字体样式 */
    font-family: 'Titan One';
    color: #fff;
    /*
    设置文字的描边
    第一个值是粗细
    第二个值是颜色
     */
    -webkit-text-stroke: 3px #000;
    text-transform: uppercase;
    /* 文字阴影 */
    text-shadow: 0 0 #f3c623, 0 0 #f2aaaa;
    /* 让文字先向下走自身高度的 50%，然后顺时针旋转 4度 */
    transform: translate(0, 50%) rotate(4deg);
    /*
    第三个值是延迟时长，calc是自动计算的方式，里面写的 var() 函数会调用
    实现定义好的属性值，也就是在 span 中添加的 --i:* 自定义属性，var()
    能调用到相应的 span 的属性值，然后再 * 120ms 来计算每个文字的延迟时长，
    这种方式省时省力
     */
    animation: move 2s calc(var(--i)*120ms) ease-in-out infinite;
}

/* 定义动画 */
@keyframes move {
    0%,
    100% {
        text-shadow: 0 0 #f3c623, 0 0 #f2aaaa;
    }
    33.33% {
        text-shadow: 0 60px #f37121, 0 120px #f2aaaa;
    }
    50% {
        text-shadow: 0 0 #8fc09a, 0 0 #84a9ac;
        /* 这个动画跟刚才写的刚好相反，动画到一半向上走自身的一半，逆时针旋转4度 */
        transform: translate(0, -50%) rotate(-4deg);
    }
    66.66% {
        text-shadow: 0 -60px #d54062, 0 -120px #8fc0a9;
    }
}
